<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>File Upload</title>
      <link rel="stylesheet" href="style.css" />
      <link rel="stylesheet" href="reset.css" />
   </head>

   <body>
      <main>
         <div class="drop-area">
            <div class="image-preview-container"></div>
            <div class="drop-area-text">
               <img src="./assets/icons/empty.svg" />
               <span>拖拽图片到这里</span>
            </div>
            <div class="mask">
               <div class="mask-close">x</div>
               <div class="progress-bar">
                  <div class="progress-bar-value"></div>
                  <span class="progress-bar-text"></span>
               </div>
            </div>
         </div>
         <div class="btn-group">
            <div style="display: inline-block">
               <label for="file" class="btn btn-upload">上传文件</label>
               <input type="file" id="file" multiple accept="image/*" />
            </div>
            <button class="btn btn-abort disabled" disabled>停止上传</button>
            <button class="btn btn-clear">清空记录</button>
         </div>
         <span class="drop-area-helper"></span>
      </main>

      <script src="./js/common.js"></script>
      <script src="./js/upload.js"></script>
      <script src="./js/drop.js"></script>
   </body>
</html>
